function check(result) {
    console.log(result)
    var title = result.children[1].children[0].innerText
    console.log(title)
    var products = []
    products.push({ "title": title });
    sessionStorage['products'] = JSON.stringify(products);
    location.href = 'good.html'
}
$(function() {

    $("#box").mouseover(function() {
        $("#u").css('animationPlayState', 'paused')
    });
    $("#box").mouseout(function() {
        $("#u").css('animationPlayState', 'running')
    });
    $.get('data/goods.json', function(response) {
            var strHtml1 = '<div class="col-lg-12 h2 text-center">推荐商品</div>'
            var strHtml2 = '<div class="col-lg-12 h2 text-center">一般商品</div>'
            for (var i = 0; i < 8; i++) {
                if (response.goods[i]) {
                    strHtml1 += `
                        <div class="thumbnail" onclick="check(this)">
                        <img src="${response.goods[i].imgPath}" alt="...">
                            <div class="caption">
                            <div class="good-top"><span>${response.goods[i].title}</span></div>
                            <div class="good-bottom"><p>价格:<span style="color:red">${response.goods[i].price}元</span></p></div>
                            </div>
                        </div>
                         `
                }
            }
            for (var i = 8; i < 16; i++) {
                if (response.goods[i]) {
                    strHtml2 += `
                    <div class="thumbnail" onclick="check(this)">
                    <img src="${response.goods[i].imgPath}" alt="...">
                    <div class="caption">
                <div class="good-top"><span>${response.goods[i].title}</span></div>
                <div class="good-bottom"><p>价格:<span style="color:red">${response.goods[i].price}元</span></p></div>
                    </div>
                </div>`

                }
            }
            $('.row').eq(0).html(strHtml1)
            $('.row').eq(1).html(strHtml2)
        })
        //获取用户名
    var userinfo = sessionStorage['users']
    if (userinfo == null) {
        $('#userName').html("未登录");
        $('#login').html('登录/注册')
    } else {
        var user = JSON.parse(sessionStorage['users'])
        $('#userName').html(user[0].Name)
        $('#login').html('退出登录')
    }

    $("#fire").click(function() {
        // $('#fire').css('background-image', '../images/fire.png')
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    })

    //滚动事件
    $(window).scroll(function() {
        var distance = $(document).scrollTop();
        console.log(distance)
        var height = $("nav").height();
        //distance 大于 最上面的的高度  将search设置固定定位
        if (distance >= height) {
            $('#fire').css('display', 'block')
            $(".search").attr('class', 'fixed')
            $('.classify').css('margin-top', '60px')
        } else {
            //取消固定定位  不脱标
            $('#fire').css('display', 'none')
            $(".fixed").attr('class', 'search')
            $('.classify').css('margin-top', '0px')
        }
    })


    //获取左侧列表
    var ul = $("#classifyUl");
    //获取右侧大盒子
    var show = $("#show");
    //获取左侧列表项
    var li = $('.classifyLi')
        //获取右侧 所有的小盒子
    var subItem = $(".sub-item");
    //离开右侧盒子时 右侧盒子隐藏
    subItem.mouseleave(function() {
        show.css('display', 'none')
    })
    ul.mouseleave(function(e) {
            console.log(e.offsetX)
            if (e.offsetX < 0 || e.offsetY > 79 || e.offsetY < 0) {

                show.css('display', 'none')
            }
        })
        //鼠标移动到 左侧某个列表项时 右侧对应的子盒子显示 其他子盒子都是隐藏
    for (let i = 0; i < li.length; i++) {
        //获取列表项的下标 --添加自定义属性index
        li[i].index = i;
        li[i].onmouseenter = function() {
            //其他子盒子隐藏
            for (var j = 0; j < subItem.length; j++) {
                subItem[j].style.display = 'none'
            }
            //右侧对应的子盒子显示
            show.css('display', 'block')
            subItem[this.index].style.display = 'block'
        }
    }
    $('.sub-item-bottom').children('ul').children('li').click(function() {
        location.href = 'search.html'
    })

})

function out() {
    sessionStorage.clear()
    if ($('#login').html() == '退出登录') {
        location.href = 'index.html'
    } else {
        location.href = 'login.html'
    }
}

function search() {
    var what = $('[type="text"]').val()
    var search = []
    search.push({ "search": what });
    sessionStorage['search'] = JSON.stringify(search);
    location.href = 'search.html'
}